はじめてのRiot

#JavaScript

梶原裕

2017.12.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

好物はインフラとフロントエンドのかじわらゆたかです。フロントエンドが好物だと言っておきながら、ここ最近めっきりフロントエンドネタを投稿していなかったので久しぶりのフロントエンドネタです。

現在開発で用いているRiot.jsの特徴を紹介したいと思います。

Riot とは？

RiotはフロントエンドのUIライブラリです。
Riotのサイトには以下のように書かれています。

なぜ新しいUIライブラリが必要なのかフロントエンドの世界には、ライブラリが溢れてはいるものの、正直なところソリューションはまだ「そこにない」と感じています。私たちは、この大きなパズルを解くために、Riotという最良のバランスを見つけました。Reactが果たしかけたかに見えたものの、重大な弱点を残している点、それをRiotは解決します。

だから——私たちには新しいライブラリが必要なのです。

HTMLを書いていたら、このDOMのブロック何度も使うんだけどな〜ってはよくあることだと思っています。そういった際にRiotを用いることでカスタムタグという単位でまとめることができます。また、その中にJavascriptのロジックを書くこともできます。

カスタムタグ

Riotはカスタムタグという単位でHTMLとJavaScriptをくっつけて再利用可能なコンポーネントとしてまとめます。
またコンポーネントはHTMLからDOMとして呼び出すことが可能です。

はじめてのRiot

Riot.jsのカスタムタグの実装方法は色々ありますが、手軽にやる例としてHTMLファイルにすべて書いてしまおうと思います。

簡単なHTMLの作成(Hello world)

こんな感じで作成し、htmlファイルとして保存します。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Riot Sample</title>
    </head>
    <body>
        Hello World
    </body>
    </html>

カスタムタグの実装

もちろん、複雑な実装をするのであればカスタムタグをカスタムタグ毎に別ファイルにすることもできます。ですが、今回は簡単なサンプルなので直接HTMLに書いてしまおうと思います。この方法はインブラウザ・コンパイル呼ぶそうです。以下の内容をHTMLに追記します。
```
    <body>
        Hello World
        <script type="riot/tag">
            <my-tag>
                <h3>Hello Classmethod.</h3>
            </my-tag>
        </script>
    </body>
    
```

Riot.jsとコンパイラの読み込み

普通にJavascriptのライブラリとして読み込みます。

    <body>
        (中略)
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/riot+compiler.min.js"></script>
    </body>

カスタムタグのマウント

実装したカスタムタグを認識させるためにカスタムタグをマウントする必要があります。今回の例ではすべてのタグをマウントします。

    <body>
        (中略)
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/riot+compiler.min.js"></script>
        <script>
            riot.mount('*')
        </script>
    </body>

カスタムタグを呼び出す

    <body>
        Hello World
        <my-tag></my-tag>
        (中略)
    </body>

確認する

作成したhtmlを開くと、my-tagがカスタムタグとして展開され、Hello Classmethod.と表示されます。

まとめ

ビルド環境を構築するとかそういったことも全く考えることなく、HTMLファイルにカスタムタグを記述し、ライブラリをロードしタグをマウントすることでカスタムタグを用いた画面を実装することが出来ました。同一のページ内に複数回出てくるhtmlタグをひとまとめにするとかなら、これだけで導入することが可能です。

次回は、カスタムタグとJavascriptの連携を取り上げたいと思います。